<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>我的订单</span>
      </div>
      <el-row class="box">
        <el-row type="flex" justify="space-between">
          <el-row
            class="cardCon"
            type="flex"
            justify="space-between"
            align="middle"
            v-for="(item, idx) of list"
            :key="idx"
          >
            <el-row>
              <el-row type="flex" justify="center" class="fontStyle">{{
                item.name
              }}</el-row>
              <el-row type="flex" justify="center">{{ item.num }}</el-row>
            </el-row>
          </el-row>
          <!-- <el-divider direction="vertical" style="height: 10vh"></el-divider> -->
        </el-row>
      </el-row>
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import Constant from "@/lib/Constant";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected data: any = {
    overall: {
      order_qty: null,
      avg_price: null,
      total_amt: null,
      total_qty: null
    }
  };
  protected list: any = [
    { name: "订单数量", num: 0, id: 0 },
    { name: "平均价格（元）", num: 0, id: 1 },
    { name: "交易数量（度）", num: 0, id: 2 },
    { name: "交易总额（元）", num: 0, id: 3 },
  ];

  @Watch("data", { immediate: true, deep: true })
  protected init() {
    this.$set(this.list[0], "num", this.data.overall.order_qty);
    this.$set(this.list[1], "num", Vue.prototype.$coinToYuan(this.data.overall.avg_price));
    this.$set(this.list[2], "num", this.data.overall.total_qty);
    this.$set(this.list[3], "num", Vue.prototype.$coinToYuan(this.data.overall.total_amt));
  }

  // protected async init() {
  //   const params: any = {
  //     page_no: 1,
  //     page_size: 10,

  //   };
  //   await this.$api.getOrdersStat(params).then((response: any) => {
  //     console.log(response);

  //   });
  // }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
.fontStyle {
  color: #077be8;
  line-height: 36px;
}
</style>


